<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blog/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="转载,javascript," />





  <link rel="alternate" href="/blog/atom.xml" title="东方无双" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=5.1.2" />






<meta name="description" content="文章出处：https://juejin.im/entry/58f5cc3661ff4b0058086979 译者：youngsterxyf-（注：阅读原文的时候没有注意发布日期，觉得不错就翻译了，翻译到JSON.parse那一节觉得有点不对路才发现是2009年发布的文章，不过还是不错的啦。另外，文章虽说24条最佳实践，其实只有23条，不知道原作者怎么漏了一条。）   1.优先使用===，而不是">
<meta name="keywords" content="转载,javascript">
<meta property="og:type" content="article">
<meta property="og:title" content="[转]--JavaScript 初学者应知的 24 条最佳实践（译）">
<meta property="og:url" content="http://yoursite.com/2017/10/02/转-JavaScript-初学者应知的-24-条最佳实践（译）/index.html">
<meta property="og:site_name" content="东方无双">
<meta property="og:description" content="文章出处：https://juejin.im/entry/58f5cc3661ff4b0058086979 译者：youngsterxyf-（注：阅读原文的时候没有注意发布日期，觉得不错就翻译了，翻译到JSON.parse那一节觉得有点不对路才发现是2009年发布的文章，不过还是不错的啦。另外，文章虽说24条最佳实践，其实只有23条，不知道原作者怎么漏了一条。）   1.优先使用===，而不是">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-10-01T16:37:05.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="[转]--JavaScript 初学者应知的 24 条最佳实践（译）">
<meta name="twitter:description" content="文章出处：https://juejin.im/entry/58f5cc3661ff4b0058086979 译者：youngsterxyf-（注：阅读原文的时候没有注意发布日期，觉得不错就翻译了，翻译到JSON.parse那一节觉得有点不对路才发现是2009年发布的文章，不过还是不错的啦。另外，文章虽说24条最佳实践，其实只有23条，不知道原作者怎么漏了一条。）   1.优先使用===，而不是">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Pisces',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: 'NO8XI81C6V',
      apiKey: '21a1e5defb2c17cc1e9ca4cf22a6dc19',
      indexName: 'chu_jian',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2017/10/02/转-JavaScript-初学者应知的-24-条最佳实践（译）/"/>





  <title>[转]--JavaScript 初学者应知的 24 条最佳实践（译） | 东方无双</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">东方无双</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/blog/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/blog/2017/10/02/转-JavaScript-初学者应知的-24-条最佳实践（译）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="无双的博客">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://upload.jianshu.io/users/upload_avatars/201324/2bc50b2b47b3.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="东方无双">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">[转]--JavaScript 初学者应知的 24 条最佳实践（译）</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-02T00:08:39+08:00">
                2017-10-02
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/编程/" itemprop="url" rel="index">
                    <span itemprop="name">编程</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<ul>
<li>文章出处：<a href="https://juejin.im/entry/58f5cc3661ff4b0058086979" target="_blank" rel="external">https://juejin.im/entry/58f5cc3661ff4b0058086979</a></li>
<li>译者：youngsterxyf<br>-（注：阅读原文的时候没有注意发布日期，觉得不错就翻译了，翻译到JSON.parse那一节觉得有点不对路才发现是2009年发布的文章，不过还是不错的啦。另外，文章虽说24条最佳实践，其实只有23条，不知道原作者怎么漏了一条。）</li>
</ul>
</blockquote>
<h3 id="1-优先使用-，而不是"><a href="#1-优先使用-，而不是" class="headerlink" title="1.优先使用===，而不是=="></a>1.优先使用===，而不是==</h3><p>JavaScript使用两种相等性操作符：===|!\==和\==|!=。通常认为做比较的最佳实践是使用前一组操作符。</p>
<blockquote>
<p>“若两个操作数的类型和值相同，那么===比较的结果为真，!==比较的结果为假。” — JavaScript语言精粹(JavaScript: The Good Parts)</p>
</blockquote>
<p>然而，如果使用==和!=，当比较不同类型的操作数时，你就会碰到问题啦。在这种情况下，这组操作符会尝试对操作数的值做无用的强制转换。</p>
<h3 id="2-Eval就是糟糕的代名词"><a href="#2-Eval就是糟糕的代名词" class="headerlink" title="2.Eval就是糟糕的代名词"></a>2.Eval就是糟糕的代名词</h3><p>对于那些不熟悉JavaScript的人来说，函数”evel”让我们能够访问JavaScript编译器。我们可以通过给”eval”传递一个字符串参数来得到该字符串执行的结果。</p>
<p>这不仅会极大地降低你的脚本的性能，也会造成一个巨大的安全隐患，因为这赋予传递进来的纯文本太多的能力。要尽可能地避免eval函数的使用。</p>
<h3 id="3-不要懒手"><a href="#3-不要懒手" class="headerlink" title="3.不要懒手"></a>3.不要懒手</h3><p>技术上来说，你确实可能侥幸地省略多数花括号和分号。大多数浏览器都能够正确地解释如下代码片段：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(someVariableExists)</div><div class="line">    x = <span class="literal">false</span></div></pre></td></tr></table></figure>
<p>然而，再考虑一下这段代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(someVariableExists)</div><div class="line">    x = <span class="literal">false</span></div><div class="line">    anotherFunctionCall();</div></pre></td></tr></table></figure>
<p>可能会有人认为上一段代码等价于：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">if</span>(someVariableExists) &#123;</div><div class="line">    x = <span class="literal">false</span>;</div><div class="line">    anotherFunctionCall();</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>很不幸，他错了。事实上，它的本意是：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(someVariableExists)</div><div class="line">    x = <span class="literal">false</span>;</div><div class="line">anotherFunctionCall();</div></pre></td></tr></table></figure></p>
<p>你应该也注意到了，代码中缩进模仿了花括号的功能。毋庸置疑，这是非常恐怖的做法，无论如何都应该避免。唯一可以省略花括号的时候是在一行式的语句中，但即使这种情况，也是很有争议的。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(<span class="number">2</span> + <span class="number">2</span> === <span class="number">4</span>) <span class="keyword">return</span> <span class="string">'nicely done'</span>;</div></pre></td></tr></table></figure></p>
<p>始终要想着以后</p>
<p>如果以后的某个时候，你需要在这种if语句中增加更多的命令，那该怎么办呢？没法子，你就只能重写这块代码了。处理这个问题的底线是对于省略写法保持谨慎。</p>
<h3 id="4-使用JS-Lint"><a href="#4-使用JS-Lint" class="headerlink" title="4.使用JS Lint"></a>4.使用JS Lint</h3><p><a href="https://link.juejin.im/?target=http%3A%2F%2Fwww.jslint.com%2F" target="_blank" rel="external">JSLint</a>是Douglas Crockford编写的一个调试器。简单地将你的脚本拷贝进去，它就会快速地扫描你的代码中任何明显的问题和错误。</p>
<blockquote>
<p>“JSLint获取一份JavaScript源码，然后扫描代码。如果发现问题，就会返回一条信息描述这个问题以及这个问题在源码中的大致位置。问题虽然经常是语法错误，却不一定是。JSLint也会查看一些风格习惯以及结构问题。它并不证明你的代码是否正确，只是提供另外的一双眼睛来帮助发现问题。”—JSLint文档</p>
</blockquote>
<p>在结束脚本代码的编写之前，对其执行一次JSLint，能够保证你不会犯一些愚蠢的错误。</p>
<h3 id="5-将脚本置于页面的底部"><a href="#5-将脚本置于页面的底部" class="headerlink" title="5.将脚本置于页面的底部"></a>5.将脚本置于页面的底部</h3><p>这条技巧在本系列前面的文章中也推荐过。因为它在此处也非常合适（As it’s highly appropriate though），所有我将那段信息直接粘贴在这里。</p>
<p>记住—这条最佳实践的主要目标是尽可能快速地为用户加载页面。当加载一个脚本时，浏览器直到整个脚本文件全部加载完毕才能继续。因此，用户必须等上更长的时间才能注意到任何的进度。</p>
<p>如果JS文件的目的仅仅是增加功能—例如，在点击某个按钮后—那么就将那些文件放在底部，body结束标签之前吧。这绝对是一个最佳实践。</p>
<p><strong>更好的做法</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;p&gt;And now you know my favorite kinds <span class="keyword">of</span> corn. &lt;<span class="regexp">/p&gt;</span></div><div class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">" src="</span>path/to/file.js<span class="string">"&gt;&lt;/script&gt;</span></div><div class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">" src="</span>path/to/anotherFile.js<span class="string">"&gt;&lt;/script&gt;</span></div><div class="line"><span class="string">&lt;/body&gt;</span></div><div class="line"><span class="string">&lt;/html&gt;</span></div></pre></td></tr></table></figure>
<h3 id="6-在For语句之外声明变量"><a href="#6-在For语句之外声明变量" class="headerlink" title="6.在For语句之外声明变量"></a>6.在For语句之外声明变量</h3><p>当执行一个冗长的”for”语句之时，仅仅让解释引擎做必须干的活吧。例如：</p>
<p><strong>糟糕的做法</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; someArray.length; i++) &#123;</div><div class="line">    <span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>);</div><div class="line">    container.innerHtml += <span class="string">'my number: '</span> + i;</div><div class="line">    <span class="built_in">console</span>.log(i);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>注意上面代码片段中的每次迭代都需要检查数组的长度，并且每次都要遍历DOM树找到”container”元素—效率多低啊！</p>
<p><strong>更好的做法</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>);</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>, len = someArray.length; i &lt; len; i++) &#123;</div><div class="line">    container.innerHtml += <span class="string">'my number: '</span> + i;</div><div class="line">    <span class="built_in">console</span>.log(i);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>感谢有位朋友留下评论展示如何进一步优化上面的代码块。</p>
<h3 id="7-构建字符串的最快方式"><a href="#7-构建字符串的最快方式" class="headerlink" title="7.构建字符串的最快方式"></a>7.构建字符串的最快方式</h3><p>当需要遍历一个数组或者对象之时，不要总是使用你能信手粘来的”for”语句。创造性地找个能够完成工作的最快速的方案。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> arr = [<span class="string">'item 1'</span>, <span class="string">'item 2'</span>, <span class="string">'item 3'</span>, ...];</div><div class="line"><span class="keyword">var</span> list = <span class="string">'&lt;ul&gt;&lt;li&gt;'</span> + arr.join(<span class="string">'&lt;/li&gt;&lt;li&gt;'</span>) + <span class="string">'&lt;/li&gt;&lt;/ul&gt;'</span>;</div></pre></td></tr></table></figure></p>
<blockquote>
<p>“我不会以测试基准来烦你；你只须相信我（或者自己去测试一下）—这是目前为止最快的方式！”<br>使用原生方法（比如join()），不用管抽象层面背后发生了什么，通常会比任何非原生方法快得多。 — James Padolsey, james.padolsey.com”</p>
<p>###8.减少全局变量</p>
<p>“通过将全局的东西封装进单个命名空间，能够大大降低与其他应用、部件、代码库交互混乱的概率。”— Douglas Crockford<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> name = <span class="string">'jeffrey'</span>;</div><div class="line"><span class="keyword">var</span> lastname = <span class="string">'Way'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;...&#125;</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(name);      <span class="comment">// Jeffrey -- or window.name</span></div></pre></td></tr></table></figure></p>
</blockquote>
<p><strong>更好的做法</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> DudeNameSpace = &#123;</div><div class="line">    name: <span class="string">'Jeffrey'</span>,</div><div class="line">    lastname: <span class="string">'Way'</span>,</div><div class="line">    doSometing: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;...&#125;</div><div class="line">&#125;</div><div class="line"><span class="built_in">console</span>.log(DudeNameSpace.name);    <span class="comment">// Jeffrey</span></div></pre></td></tr></table></figure></p>
<p>注意我们是怎样将全局性的“足迹”减少为一个命名可笑的”DudeNameSpace”对象的。</p>
<h3 id="9-注释你的代码"><a href="#9-注释你的代码" class="headerlink" title="9.注释你的代码"></a>9.注释你的代码</h3><p>一开始看起来似乎没有必要，但请相信我，你将会想尽可能好地注释你的代码。当你几个月后再次回到项目，会发生什么呢？发现你根本没法轻松地记起当初对每一行代码的想法。或者，如果你的某个同事需要修改你的代码，那又会怎么样呢？始终，一直记着注释你代码的重要部分吧。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Cycle through array and echo out each name</span></div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>, len = array.length; i &lt; len; i++) &#123;</div><div class="line">    <span class="built_in">console</span>.log(array[i]);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="10-拥抱渐进增强"><a href="#10-拥抱渐进增强" class="headerlink" title="10.拥抱渐进增强"></a>10.拥抱渐进增强</h3><p>始终考虑到如何处理JavaScript禁用的情况。也许你会想“大多数我网页的阅读器都是启用JavaScript的，因此我不担心这个问题。”然而，这会是一个巨大的错误。</p>
<p>你曾花时间去看过关闭JavaScript后你的漂亮的滑动条是什么样么？（<a href="https://link.juejin.im/?target=https%3A%2F%2Faddons.mozilla.org%2Fen-US%2Ffirefox%2Faddon%2Fweb-developer%2F" target="_blank" rel="external">下载</a>Web开发者工具栏以方便干这事。）也许它会完全破坏你的站点。按照以往经验，设计你的站点时应假设将会禁用JavaScript。那么，一旦你这样做了，那么开始渐进地增强你的网页布局吧！</p>
<h3 id="11-不要传递字符串给”SetInterval”或”SetTimeOut”"><a href="#11-不要传递字符串给”SetInterval”或”SetTimeOut”" class="headerlink" title="11.不要传递字符串给”SetInterval”或”SetTimeOut”"></a>11.不要传递字符串给”SetInterval”或”SetTimeOut”</h3><p>考虑一下如下代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">setInterval(</div><div class="line"><span class="string">"document.getElementById('container').innerHTML += 'my new number: ' + i"</span>, <span class="number">3000</span></div><div class="line">);</div></pre></td></tr></table></figure>
<p>这段代码不仅低效，而且其行为与”eval”函数相同。永远不要传给字符串给SetInterval和<br>SetTimeOut。相反，应传递一个函数名。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">setInterval(someFunction, <span class="number">3000</span>);</div></pre></td></tr></table></figure></p>
<h3 id="12-不要使用”With”语句"><a href="#12-不要使用”With”语句" class="headerlink" title="12.不要使用”With”语句"></a>12.不要使用”With”语句</h3><p>乍一看，”With”语句似乎是个聪明的想法。基本概念是它们能够为访问深度嵌套对象提供一种简写方式。例如…<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">with</span> (being.person.man.bodyparts) &#123;</div><div class="line">    arms = <span class="literal">true</span>;</div><div class="line">    legs = <span class="literal">true</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p><strong>取代如下写法</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">being.person.man.bodyparts.arms = <span class="literal">true</span>;</div><div class="line">being.person.man.bodyparts.legs = <span class="literal">true</span>;</div></pre></td></tr></table></figure></p>
<p>很不幸，经过一些测试，会发现这种简写在设置新成员时表现非常糟糕。作为替代，你应该使用var。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> o = being.person.man.bodyparts;</div><div class="line">o.arms = <span class="literal">true</span>;</div><div class="line">o.legs = <span class="literal">true</span>;</div></pre></td></tr></table></figure></p>
<h3 id="13-使用-而不是New-Object"><a href="#13-使用-而不是New-Object" class="headerlink" title="13.使用{}而不是New Object()"></a>13.使用{}而不是New Object()</h3><p>JavaScript中有多种创建对象的方式。也许更传统的方式是使用”new”构造器，像这样：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>();</div><div class="line">o.name = <span class="string">'Jeffrey'</span>;</div><div class="line">o.lastname = <span class="string">'Way'</span>;</div><div class="line">o.someFuncion = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>然而，这种方式因其行为并不是我们所想的那样而被认为是“糟糕的实践。相反，我推荐你使用更健壮的对象字面方法。</p>
<p><strong>更好的写法</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> o = &#123;</div><div class="line">    name: <span class="string">'Jeffrey'</span>,</div><div class="line">    lastName: <span class="string">'Way'</span>,</div><div class="line">    someFunction: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</div><div class="line">    &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>注意如果你只是想简单地创建个空对象，{}就派上用场了。</p>
<p><code>var o = {};</code></p>
<p>“对象字面量使我们能够编写支持很多特性的代码，并对代码的实现者来说代码仍然相对直观。不需要直接调用构造器或维护传递给函数的参数的正确顺序，等等。” — dyn-web.com</p>
<h3 id="14-使用-而不是New-Array"><a href="#14-使用-而不是New-Array" class="headerlink" title="14.使用[]而不是New Array()"></a>14.使用[]而不是New Array()</h3><p>这同样适用于创建一个新数组。</p>
<p>过得去的写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>();</div><div class="line">a[<span class="number">0</span>] = <span class="string">'Joe'</span>;</div><div class="line">a[<span class="number">1</span>] = <span class="string">'Plumber'</span>;</div></pre></td></tr></table></figure>
<p>更好的写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [<span class="string">'Joe'</span>, <span class="string">'Plumber'</span>];</div></pre></td></tr></table></figure>
<p>“JavaScript中一个常见的错误是需要数组时使用对象或需要对象时使用数组。规则很简单：当属性名是小的连续整数时，你应该使用数组。否则，使用对象”—Douglas Crockford</p>
<h3 id="15-一长串变量？省略”var”关键字，使用逗号替代"><a href="#15-一长串变量？省略”var”关键字，使用逗号替代" class="headerlink" title="15.一长串变量？省略”var”关键字，使用逗号替代"></a>15.一长串变量？省略”var”关键字，使用逗号替代</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> someItem = <span class="string">'some string'</span>;</div><div class="line"><span class="keyword">var</span> anotherItem = <span class="string">'another string'</span>;</div><div class="line"><span class="keyword">var</span> oneMoreItem = <span class="string">'one more string'</span>;</div></pre></td></tr></table></figure>
<p><strong>更好的写法</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> someItem = <span class="string">'some string'</span>,</div><div class="line">    anotherItem = <span class="string">'another string'</span>,</div><div class="line">    oneMoreItem = <span class="string">'one more string'</span>;</div></pre></td></tr></table></figure>
<p>相当的不言自明。我不知道这里是否有任何真正的速度提升，但是它使你的代码更加简洁了。</p>
<h3 id="16-始终，始终使用分号"><a href="#16-始终，始终使用分号" class="headerlink" title="16.始终，始终使用分号"></a>16.始终，始终使用分号</h3><p>技术上来说，大多数浏览器都允许你的省略一些分号。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> someItem = <span class="string">'some string'</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">'something'</span></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>话虽如此，但这是一种非常糟糕的做法，可能导致更大的问题，问题查找起来也更困难。</p>
<p><strong>更好的写法</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> someItem = <span class="string">'some string'</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">'something'</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="18-”For-in”语句"><a href="#18-”For-in”语句" class="headerlink" title="18.”For in”语句"></a>18.”For in”语句</h3><p>遍历对象内的成员时，你也会得到方法函数。为了解决这个问题，应始终将你的代码包装在一个if语句中来过滤信息。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span>(key <span class="keyword">in</span> object) &#123;</div><div class="line">    <span class="keyword">if</span>(object.hasOwnProperty(key)) &#123;</div><div class="line">        ... then <span class="keyword">do</span> something...</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>引自JavaScript: 语言精粹， Douglas Crockford著</p>
<h3 id="19-使用Firebug的”Timer”特性来优化代码"><a href="#19-使用Firebug的”Timer”特性来优化代码" class="headerlink" title="19.使用Firebug的”Timer”特性来优化代码"></a>19.使用Firebug的”Timer”特性来优化代码</h3><p>需要一种快速简单的方法来检测一个操作花费多长时间么？使用Firebug的”timer”特性记录结果。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">TimeTracker</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.time(<span class="string">"MyTimer"</span>);</div><div class="line">    <span class="keyword">for</span>(x=<span class="number">5000</span>; x &gt; <span class="number">0</span>; x--)&#123;&#125;</div><div class="line">    <span class="built_in">console</span>.timeEnd(<span class="string">"MyTimer"</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="20-阅读，阅读，再阅读"><a href="#20-阅读，阅读，再阅读" class="headerlink" title="20.阅读，阅读，再阅读"></a>20.阅读，阅读，再阅读</h3><p>我是一个Web开发博客的超级粉丝（比如这个博客！），但吃午餐或者睡前，博客确实不是书籍的替代品。始终在你的床前桌上放一本wen开发书籍吧。如下是一些我最喜欢的JavaScript书籍。</p>
<ul>
<li><a href="https://link.juejin.im/?target=http%3A%2F%2Fwww.packtpub.com%2Fobject-oriented-javascript-applications-libraries%2Fbook" target="_blank" rel="external">面向对象的JavaScript</a></li>
<li><a href="https://link.juejin.im/?target=http%3A%2F%2Foreilly.com%2Fcatalog%2F9780596517748%2F" target="_blank" rel="external">JavaScript：语言精粹</a></li>
<li><a href="https://link.juejin.im/?target=http%3A%2F%2Fwww.packtpub.com%2Flearning-jquery-1.3%2Fbook" target="_blank" rel="external">学习jQuery 1.3</a></li>
<li><a href="https://link.juejin.im/?target=http%3A%2F%2Foreilly.com%2Fcatalog%2F9780596527464%2F" target="_blank" rel="external">学习JavaScript</a><br>多阅读几遍。我仍旧在读！</li>
</ul>
<h3 id="21-自执行函数-Self-Executing-Functions"><a href="#21-自执行函数-Self-Executing-Functions" class="headerlink" title="21.自执行函数(Self-Executing Functions)"></a>21.自执行函数(Self-Executing Functions)</h3><p>相比调用函数，当页面加载或调用父函数时，让函数自动执行会简单些。简单地将你的函数包装在圆括号内，并添加额外的一对圆括号，其本质上就调用了这个函数。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">(<span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">        name: <span class="string">'jeff'</span>,</div><div class="line">        lastName: <span class="string">'way'</span></div><div class="line">    &#125;;</div><div class="line"> &#125;)();</div></pre></td></tr></table></figure></p>
<h3 id="22-原始-raw-JavaScript代码的执行速度始终快于使用代码库"><a href="#22-原始-raw-JavaScript代码的执行速度始终快于使用代码库" class="headerlink" title="22.原始(raw)JavaScript代码的执行速度始终快于使用代码库"></a>22.原始(raw)JavaScript代码的执行速度始终快于使用代码库</h3><p>JavaScript代码库，如jQuery和Mootools，能够为你节省大量的编码时间—特别是使用AJAX操作。话虽如此，始终谨记代码库的执行速度始终是比不上原始JavaScript代码的（假设了代码的正确性）。</p>
<p>jQuery的”each”方法用来做遍历非常赞，但使用原生”for”语句始终会快一些。</p>
<h3 id="23-Crockford的JSON-Parse"><a href="#23-Crockford的JSON-Parse" class="headerlink" title="23.Crockford的JSON.Parse"></a>23.Crockford的JSON.Parse</h3><p>虽然JavaScript 2应该有一个内置的JSON解析器，但写本文之时，我们仍旧需要自己实现。Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。</p>
<p>简单地导入该脚本，你就能获得一个新的JSON全局对象，用于解析你的.json文件。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> response = <span class="built_in">JSON</span>.parse(xhr.responseText);</div><div class="line"></div><div class="line"><span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>);</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>, len = response.length; i &lt; len; i++) &#123;</div><div class="line">    container.innerHTML += <span class="string">'&lt;li&gt;'</span> + response[i].name + <span class="string">' : '</span> + response[i].email + <span class="string">'&lt;/li&gt;'</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="24-删除”Language”"><a href="#24-删除”Language”" class="headerlink" title="24.删除”Language”"></a>24.删除”Language”</h3><p>几年前，在script标签内常见有”language”属性。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;script type=<span class="string">"text/javascript"</span> language=<span class="string">"javascript"</span>&gt;</div><div class="line">...</div><div class="line">&lt;<span class="regexp">/script&gt;</span></div></pre></td></tr></table></figure></p>
<p>然而，这个属性很早就被弃用了，所以就不要再使用了。</p>
<p>就这些了，同志们</p>
<p>现在你知道这JavaScript初学者应该知道的24条基本技巧。有机会也让我知道一下你的小贴士吧。感谢阅读。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blog/tags/转载/" rel="tag"># 转载</a>
          
            <a href="/blog/tags/javascript/" rel="tag"># javascript</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2017/10/01/图解：MVC，MVP-和-MVVM/" rel="next" title="图解：MVC，MVP 和 MVVM ">
                <i class="fa fa-chevron-left"></i> 图解：MVC，MVP 和 MVVM 
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2017/10/02/转-资源整合/" rel="prev" title="[转]--资源整合">
                [转]--资源整合 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zMTEyMS83Njcw"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          
            <img class="site-author-image" itemprop="image"
              src="http://upload.jianshu.io/users/upload_avatars/201324/2bc50b2b47b3.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120"
              alt="无双的博客" />
          
            <p class="site-author-name" itemprop="name">无双的博客</p>
            <p class="site-description motion-element" itemprop="description"></p>
        </div>

        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/blog/archives/">
            
                <span class="site-state-item-count">8</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/blog/categories/index.html">
                <span class="site-state-item-count">3</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/blog/tags/index.html">
                <span class="site-state-item-count">13</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/blog/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/DongFangWuShuang" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>GitHub</a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="https://gitee.com/chu_jian/" title="Gitee" target="_blank">Gitee</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://github.com/DongFangWuShuang/" title="Github" target="_blank">Github</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-优先使用-，而不是"><span class="nav-number">1.</span> <span class="nav-text">1.优先使用===，而不是==</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-Eval就是糟糕的代名词"><span class="nav-number">2.</span> <span class="nav-text">2.Eval就是糟糕的代名词</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-不要懒手"><span class="nav-number">3.</span> <span class="nav-text">3.不要懒手</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-使用JS-Lint"><span class="nav-number">4.</span> <span class="nav-text">4.使用JS Lint</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-将脚本置于页面的底部"><span class="nav-number">5.</span> <span class="nav-text">5.将脚本置于页面的底部</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-在For语句之外声明变量"><span class="nav-number">6.</span> <span class="nav-text">6.在For语句之外声明变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-构建字符串的最快方式"><span class="nav-number">7.</span> <span class="nav-text">7.构建字符串的最快方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-注释你的代码"><span class="nav-number">8.</span> <span class="nav-text">9.注释你的代码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-拥抱渐进增强"><span class="nav-number">9.</span> <span class="nav-text">10.拥抱渐进增强</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11-不要传递字符串给”SetInterval”或”SetTimeOut”"><span class="nav-number">10.</span> <span class="nav-text">11.不要传递字符串给”SetInterval”或”SetTimeOut”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-不要使用”With”语句"><span class="nav-number">11.</span> <span class="nav-text">12.不要使用”With”语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13-使用-而不是New-Object"><span class="nav-number">12.</span> <span class="nav-text">13.使用{}而不是New Object()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#14-使用-而不是New-Array"><span class="nav-number">13.</span> <span class="nav-text">14.使用[]而不是New Array()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#15-一长串变量？省略”var”关键字，使用逗号替代"><span class="nav-number">14.</span> <span class="nav-text">15.一长串变量？省略”var”关键字，使用逗号替代</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#16-始终，始终使用分号"><span class="nav-number">15.</span> <span class="nav-text">16.始终，始终使用分号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#18-”For-in”语句"><span class="nav-number">16.</span> <span class="nav-text">18.”For in”语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#19-使用Firebug的”Timer”特性来优化代码"><span class="nav-number">17.</span> <span class="nav-text">19.使用Firebug的”Timer”特性来优化代码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#20-阅读，阅读，再阅读"><span class="nav-number">18.</span> <span class="nav-text">20.阅读，阅读，再阅读</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#21-自执行函数-Self-Executing-Functions"><span class="nav-number">19.</span> <span class="nav-text">21.自执行函数(Self-Executing Functions)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#22-原始-raw-JavaScript代码的执行速度始终快于使用代码库"><span class="nav-number">20.</span> <span class="nav-text">22.原始(raw)JavaScript代码的执行速度始终快于使用代码库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#23-Crockford的JSON-Parse"><span class="nav-number">21.</span> <span class="nav-text">23.Crockford的JSON.Parse</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#24-删除”Language”"><span class="nav-number">22.</span> <span class="nav-text">24.删除”Language”</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 &mdash; <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">无双的博客</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.2</div>




        




  <script type="text/javascript">
    (function() {
      var hm = document.createElement("script");
      hm.src = "//tajs.qq.com/stats?sId=63778783";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/blog/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/blog/js/src/schemes/pisces.js?v=5.1.2"></script>



  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.2"></script>


  

  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  








  





  

  

  

  

  

  

</body>
</html>
